/**
* 左边菜单
*/
<template>
  <el-menu
    class="el-menu-vertical-demo"
    :unique-opened="true"
    :collapse="collapsed"
    background-color="#334157"
    text-color="#fff"
    active-text-color="#409EFF"
    router
  >
    <div class="logo_box">
      <img class="logoimg" :src="collapsed?logo_x:logo_box" @click="collapsed">
    </div>
<!--    一级菜单-->
    <el-submenu :index="item.menu_id" v-for="item in menuList" :key="item.menu_id">
      <!-- 一级菜单模板区域 -->
      <template slot="title">
        <!--图标-->
        <i :class="item.menu_icon"></i>
        <!--文本-->
        <span>{{item.menu_name}}</span>
      </template>
      <el-menu-item :index="subItem.menu_path" v-for="subItem in item.childMenus" :key="subItem.menu_id">
        <!-- 二级菜单模板 -->
        <template slot="title">
          <!-- 图标 -->
          <i :class="subItem.menu_icon"></i>
          <!-- 文本 -->
          <span>{{subItem.menu_name}}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: 'LeftNav',
  data () {
    return {
      // 左侧菜单数据
      menuList: [],
      collapsed: false,
      logo_box: require('../../assets/img/北农商文字logo.png'),
      logo_x: require('../../assets/img/北农商logo.png')
    }
  },

  // 创建完毕状态(里面是操作)
  created() {
    // 在created阶段请求左侧菜单数据
    this.getMenuList()
    this.$root.Bus.$on('toggle', value => {
       this.collapsed = !value
    })
  },
  methods: {
    getMenuList() {
      this.$axios.get('/querySysMenu').then(resp => {
        if (resp && resp.status === 200) {
          this.menuList = resp.data
        }
      })
    }
  }
}
</script>
<style>
  .asideshow {
    width: 205px !important;
    height: 100%;
    background-color: #304156;
    margin: 0px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 205px;
    height: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
  .el-menu-item-group__title {
    padding: 0px;
  }
  .el-menu {
    border: none;
  }
  .logo_box {
    height: 35px;
    line-height: 35px;
    text-align: center;
    padding: 20px 0px;
  }
  .logoimg {
    height: 35px;
  }
</style>
